<template>
  <u-popup :show="C.showModal.value" mode="center" :round="10">
    <view class="vbox popup-container">
      <view class="popup-header">
        <text>{{
          C.modalMode.value === "edit" ? "编辑班级" : "添加班级"
        }}</text>
        <view class="fill"></view>
        <u-icon name="close" @click="C.closePopup()" size="18"></u-icon>
      </view>
      <u-form :model="C.currentModel" ref="formRef" :rules="rules" label-position="left">
        <u-form-item label="班级名称" prop="name">
          <u-input v-model="C.currentModel.name" placeholder="输入班级名称"></u-input>
        </u-form-item>
        <u-form-item label="描述" prop="desc">
          <u-input v-model="C.currentModel.desc" placeholder="输入班级描述" type="textarea"></u-input>
        </u-form-item>

        <view class="hbox">
          <u-button type="default" @click="C.closePopup()" text="取消"></u-button>
          <u-button type="primary" @click="handleSubmit" :text="C.modalMode.value === 'edit' ? '保存' : '添加'"></u-button>
        </view>
      </u-form>
    </view>
  </u-popup>
</template>

<script setup>
import { ref } from "vue";
import C from "@/js/admin/class.js";

const formRef = ref();

const rules = ref({
  name: [
    {
      required: true,
      message: '请输入班级名称',
      trigger: ['blur', 'change']
    }
  ]
});

const handleSubmit = () => {
  formRef.value.validate().then(() => {
    C.handleSubmit();
  }).catch(errors => {
    console.error('表单校验失败:', errors);
  });
};
</script>

<style scoped>
.popup-container {
  padding: 20px;
  width: 80vw;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

.fill {
  flex: 1;
}

.hbox {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.hbox u-button {
  flex: 1;
}
</style>